import QtQuick 2.0

Rectangle{
    width: 360; height: 240
    color: "#eeeeee"
    id: rootItem

    Rectangle{
        id: blueRect
        width: 200; height: 180
        color: "blue"
        x: 8; y: 8
    }

    Rectangle{
        id: redRect
        color: "red"
        width: 100; height: 100
        anchors.left: blueRect.right
        anchors.leftMargin: 10
        anchors.top: blueRect.top

        MouseArea{
            id: mouseArea
            anchors.fill: parent
            onClicked: {
                if(redRect.state == "" || redRect.state == "default"){
                    redRect.state = "reanchor";
                    console.log(redRect.state)
                }else{
                    redRect.state = "default";
                    console.log(redRect.state)
                }
            }
        }

        states: [
            State {
                name: "reanchor"
                changes: [
                    AnchorChanges{
                        target: redRect
                        anchors.top: blueRect.bottom
                        anchors.left: rootItem.left
                    },
                    PropertyChanges {
                        target: redRect
                        height: 40
                        anchors.topMargin: 4
                    }
                ]
            },
            State {
                name: "default"
                AnchorChanges{
                    target: redRect
                    anchors.left: blueRect.right
                    anchors.top: blueRect.top
                }
            }
        ]
    }
}

